import Taro, { Component } from '@tarojs/taro'
import { AtTabBar } from 'taro-ui'
import { observer, inject } from '@tarojs/mobx'
import '@tarojs/async-await'
import './tabBar.scss'
import Stores from '../../stores/storeIdentifier'
import CartStore from '../../stores/cartStore';


export interface ITabBarProps {
  nowPage?: any
  cartStore?: CartStore
}
@inject(Stores.CartStore)
@observer
class TabBar extends Component<ITabBarProps> {
  state = {
    current: 0
  };
  cartNum: number
  nav: any[];
  constructor(props) {
    super(props)
  }

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */


  componentWillMount() {
    let index: number = 0;
    switch (this.props.nowPage) {
      case "index":
        index = 2;
        break;
      // case "category":
      //   index = 1;
      //   break;
      // case "cart":
      //   index = 2;
      //   break;
      case "profile":
        index = 1;
        break;
    }
    this.setState({
      current: index
    },() => {
      this.nav = [
        { title: '首页', iconPrefixClass:'icon', iconType: 'shouye1' },
        // { title: '分类', iconType: 'bullet-list' },
        // { title: '购物车', iconType: 'shopping-cart', },
        { title: '我的', iconPrefixClass:'icon', iconType: 'wode1' }
      ]
    })
  }

  async componentDidMount() {
    // await this.props.cartStore!.getMyShoppingCartCount()
    // this.cartNum = this.props.cartStore!.cartNum
    // if (this.cartNum > 0)
    //   this.nav[2].text = this.cartNum.toString()
    // this.setState({})
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  handleClick(value) {
    if (this.state.current != value) {
      this.setState({
        current: value
      })
      let nav = value.toString();
      let url
      switch (nav) {
        case "0":
          url = `/pages/index/index`;
          break;
        // case "1":
        //   url = `/pages/category/index`;
        //   break;
        // case "2":
        //   url = `/pages/cart/index`;
        //   break;
        case "1":
          url = `/pages/profile/index`;
          break;

      }
      Taro.redirectTo({
        url: url,
      })
    }
  }

  render() {
    return (
      <AtTabBar
        className='my-tab-bar'
        fixed
        selectedColor='#f6293a'
        tabList={this.nav}
        onClick={this.handleClick.bind(this)}
        current={this.state.current}
      />
    )
  }
}

export default TabBar
